<template>
  <div class="login-view">
    <div class="login">
      <div class="title">
        <h1>admin管理系统</h1>
      </div>
      <div class="login-form">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          status-icon
          :rules="rules"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="username" >
            <el-input v-model="ruleForm.username"  placeholder="请输入用户名"/>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password" type="password" autocomplete="off" show-password  placeholder="请输入密码" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
          </el-form-item>

        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { reactive, ref } from 'vue';
  import axios from 'axios'; // 确保导入 axios
  import { useRouter } from 'vue-router'; // 导入 Vue Router
  import { ElMessage } from 'element-plus'; // 导入 ElMessage
  import store from '@/store';

  const ruleFormRef = ref(null);
  const router = useRouter(); // 创建 router 实例

  // 表单数据
  const ruleForm = reactive({
    username: '',
    password: '',
  });

  // 表单验证规则
  const rules = {
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 3, message: '用户名至少3个字符', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 6, message: '密码至少6个字符', trigger: 'blur' }
    ]
  };

  // 登录方法
  const submitForm = (formEl) => {
    if (!formEl) return;
    formEl.validate((valid) => {
      if (valid) {
        // 模拟登录请求
        console.log('提交成功');
        login(); // 登录的调用
      } else {
        console.log('表单验证失败');
        return false;
      }
    });
  };

  // 重置方法
  const resetForm = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();
  };

  // 登录请求
  const login = async () => {
    try {
      const loginData = {
        username: ruleForm.username,
        password: ruleForm.password
      };

      // 发起登录请求
      const response = await axios.post('/login/pwd/', loginData);  // 请替换为正确的登录 API 路径
      const data = response.data;

      if (data.code === 200) {
        const token = data.data.token;
        const menuList = data.data.menu_list
        const userInfo = data.data.user_info
        localStorage.setItem('token', JSON.stringify(token)); // 存储 token
        localStorage.setItem('menuList',JSON.stringify(menuList))
        localStorage.setItem('userInfo',JSON.stringify(userInfo))
        store.commit('INIT')
        router.push('/'); // 登录成功后跳转到首页
        ElMessage.success({message:data.msg,duration:1000});// 显示成功消息，并在1秒后自动关闭
        
        
      } else {
        ElMessage.error({message:data.msg,duration:1000});// 显示成功消息，并在1秒后自动关闭
      }
    } catch (error) {
      console.error('请求失败:', error);
      ElMessage.error({message:'请求失败，服务器或网络错误,详情',error,duration:1000});// 显示成功消息，并在1秒后自动关闭
    }
  };
</script>

<style scoped>
.login-view {
  width: 100%;
  height: 100vh; /* 使背景图填充整个视窗 */
  background-image: url('@/assets/images/background.jpg'); /* 设置背景图 */
  background-size: cover; /* 确保背景图覆盖整个区域 */
  background-position: center center; /* 背景图居中显示 */
  background-repeat: no-repeat; /* 背景图不重复 */
  display: flex;
  justify-content: center;
  align-items: center; /* 居中显示子元素 */
}

.login {
  width: 400px;
  height: 260px;
  background-color: rgba(255, 255, 255, 0.8); /* 设置透明背景色，适应背景图 */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.title {
  text-align: center;
  margin-bottom: 20px;
  padding-top: 20px;
}

.title h1 {
  font-size: 24px; /* 设置字体大小 */
  font-weight: bold; /* 设置字体加粗 */
}

.login-form {
  width: 100%;
  max-width: 350px;
}

/* 输入框样式 */
.el-input {
  margin-bottom: 8px;
}

/* hover效果 */
.login:hover {
  box-shadow: 0 4px 20px rgba(59, 43, 43, 0.15); /* 放大阴影 */
}
</style>
